<template>
  <el-card class="layer-control">
    <el-tree
      :data="layers"
      show-checkbox
      node-key="index"
      :props="defaultProps"
      @check="handleLayerToggle"
      ref="treeRef"
    >
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <el-icon><component :is="getIconForGeomType(data.type)" /></el-icon>
          <span>{{ node.label }}</span>
        </span>
      </template>
    </el-tree>
  </el-card>
</template>

<script setup>
import { ref, watch, onMounted, nextTick,inject } from 'vue' // 引入 Vue 挂载所需的 API
import { ElCard, ElTree, ElIcon } from 'element-plus' // 引入 Element Plus 组件
import { Location, Histogram, MapLocation } from '@element-plus/icons-vue' // 引入图标组件



// const docLayer = inject('docLayer') // 注入地图组件实例

//定义组件的 props
const props = defineProps({
  map: {
    type: Object,
    required: true, // map 属性为必需的对象类型
  },
})

const layers = ref([]) // 用于存储图层信息的响应式引用
const treeRef = ref(null) // 用于引用树组件
const defaultProps = {
  children: 'children', // 子节点的字段名称
  label: 'name', // 节点标签的字段名称
}



let docLayer // 声明文档图层变量

// 观察 props.map 的变化，当其更新时执行回调
watch(
  () => props.map,
  (newMap) => {
    if (newMap) {
      // 获取地图组件的图层并查找 Doc 类型的图层
      docLayer = newMap
        .getLayers()
        .getArray()
        .find((layer) => layer instanceof Zondy.Map.Doc)
      getLayers() // 调用获取图层信息的函数
    }
  },
  { immediate: true } // 立即执行一次观察
)

// 获取图层信息并更新 layers 数据
function getLayers() {
  const docCatalog = new Zondy.Catalog.MapDoc({
    docName: 'xm', // 创建一个 MapDoc 实例
  })

  docCatalog.getLayersInfo((data) => {
    // 将获取到的图层信息转换为符合要求的数据格式
    layers.value = data.value.map((item) => ({
      type: item.GeomType, // 图层几何类型
      index: item.LayerIndex, // 图层索引
      name: item.Name, // 图层名称
    }))

    // 在下一个 tick 中设置所有图层为选中状态
    nextTick(() => {
      if (treeRef.value) {
        const allKeys = layers.value.map((layer) => layer.index) // 获取所有图层的索引
        treeRef.value.setCheckedKeys(allKeys) // 设置树组件中所有图层为选中状态
      }
    })
  })
}

// 处理图层的选中状态改变事件
function handleLayerToggle(data, checked) {
  // 根据图层的选中状态确定图层的状态
  const status = checked.checkedKeys.includes(data.index)
    ? 'include' // 如果被选中，设置为 include
    : 'exclude' // 如果未选中，设置为 exclude
  docLayer.setLayerStatus(data.index, status) // 更新文档图层的状态
}

// 根据几何类型返回相应的图标组件
function getIconForGeomType(type) {
  switch (type) {
    case 'Pnt':
      return Location // 点类型图层的图标
    case 'Lin':
      return Histogram // 线类型图层的图标
    case 'Reg':
      return MapLocation // 面类型图层的图标
    default:
      return '' //没有匹配类型时返回空
  }
}

// 组件挂载时调用，获取图层信息
onMounted(() => {
  if (props.map) {
    getLayers() // 如果图层存在，调用获取图层的函数
  }
})
</script>

<style scoped>
.layer-control {
  position: absolute;
  top: 60px;
  right: 20px;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.8);
}

.custom-tree-node {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.custom-tree-node .el-icon {
  margin-right: 8px;
}
</style>
